<template>
  <el-container class="home">
    <el-header>  
      <div>
	  <img src="../assets/img/llogo.png" alt="" class="logo">
	  <span>新零售门店管理系统</span>
	  </div>
	  <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
		
      <el-aside :width="iscollapse? '64px':'200px'">
		  <div class="toggle-button" @click="toggle"> <----> </div>
		  <el-menu
		        background-color= "skyblue"
		        text-color="black"
		        active-text-color="black" :collapse="iscollapse" :collapse-transition = "false"
				@select="handleSelect" 	>
				
		        <el-submenu index="1">
		          <template slot="title">
		            <i class="el-icon-shopping-bag-2"></i>
		            <span>商品管理</span>
		          </template>
		          <el-menu-item-group>
		            <el-menu-item index="1-1">我的商品</el-menu-item>
		            <el-menu-item index="1-2">商品发布</el-menu-item>
		          </el-menu-item-group>
		        </el-submenu>
				<el-submenu index="2">
				  <template slot="title">
				    <i class="el-icon-document-copy"></i>
				    <span>会员管理</span>
				  </template>
				  <el-menu-item-group>
				    <el-menu-item index="2-1">会员列表</el-menu-item>
				    <el-menu-item index="2-2">会员订单</el-menu-item>
				  </el-menu-item-group>
				</el-submenu>
				<el-submenu index="3">
				<template slot="title">
				    <i class="el-icon-document"></i>
				    <span>个人</span>
				  </template>
				  <el-menu-item-group>
				    <el-menu-item index="3-1">个人中心</el-menu-item>
				  </el-menu-item-group>
				</el-submenu>
				<el-submenu index="4">
				<template slot="title">
				    <i class="el-icon-position"></i>
				    <span>营销管理</span>
				  </template>
				  <el-menu-item-group>
				    <el-menu-item index="4-1">促销内容</el-menu-item>
				  </el-menu-item-group>
				</el-submenu>
				<el-submenu index="5">
				<template slot="title">
				    <i class="el-icon-position"></i>
				    <span>订单管理</span>
				  </template>
				  <el-menu-item-group>
				    <el-menu-item index="5-1">我的订单</el-menu-item>
				  </el-menu-item-group>
				</el-submenu>
				<el-submenu index="6">
				<template slot="title">
				    <i class="el-icon-position"></i>
				    <span>代销管理</span>
				  </template>
				  <el-menu-item-group>
				    <el-menu-item index="6-1">我的代销</el-menu-item>
				  </el-menu-item-group>
				</el-submenu>
		      </el-menu>
	  </el-aside>
      <!--路由-->
	  <el-main>
		  <router-view></router-view>
	  </el-main>
    </el-container>
  </el-container>
</template>

<script>
//import WelcomeView from '../views/WelcomeView.vue'
export default {
  name: 'AdminHomeView',
  components: {
		//WelcomeView
	},
	data(){
		return{
			iscollapse :false
		}
	},
  methods:{
	toggle(){
		this.iscollapse = !this.iscollapse
	},
	logout(){
	        window.sessionStorage.clear()
	        this.$router.push('/login')
	      },
	handleOpen(key, keyPath) {
		console.log(key, keyPath);
		},
	handleClose(key, keyPath) {
		 console.log(key, keyPath);
		},
	handleSelect(index,path){
		  console.log(index);
		  switch(index){
			  case '1-1':  //点击的是商品入库
			     this.$router.push('/adminHome/inHouse',()=>{},()=>{});
				break;
			  case '1-2':  //点击的是商品出库
			     this.$router.push('/adminHome/outHouse',()=>{},()=>{});
				break;
			  case '2-1':  //点击的是会员列表
			    this.$router.push('/adminHome/userCenter',()=>{},()=>{});
			break;
			  case '2-2': //点击的是会员订单
			     this.$router.push('/adminHome/modifyPassword',()=>{},()=>{});
				break;
				case '3-1': //点击的是修改密码
				   this.$router.push('/adminHome/person',()=>{},()=>{});
					break;
			  case '4-1': //点击的是促销
			     this.$router.push('/adminHome/sale',()=>{},()=>{});
				break;
			  case '5-1': //点击的是我的订单
			     this.$router.push('/adminHome/home',()=>{},()=>{});
				break;
				case '6-1': //点击的是我的代销
				   this.$router.push('/adminHome/sell',()=>{},()=>{});
				break;
			  
		  }
	  }
  }
}
</script>

<style lang="less" scoped>
	.home{
		height: 100%;
	}
	.el-header{
			background-color: lightblue;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: black;
			font-size: 20px;
			>div{
				display:flex;
				align-items: center;
				span{
					margin-left: 15px ;
			}
		}
	}
	.el-aside{
		background-color: skyblue;
	}
	.el-main{
		background-color: ;
	}
	.toggle-button{
		background-color:skyblue;
		font-size:10px ;
		line-height:24px ;
		color:black;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
	.logo{
		width: 40px
	}
</style>
